<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>汇率计算器</title>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <style>
    p.title {
      text-align: center;
      font-size: 18px;
      margin: 30px 0 10px 0;
    }

    p.intro {
      text-align: center;
      font-size: 14px;
    }

    ul {
      margin: 0 auto;
      width: 200px;
      list-style-type: none;
      border: 2px solid #999;
      border-radius: 10px;
      padding: 0;
      font-size: 16px;
      font-weight: bold;
      font-family: 'Courier New', Courier, monospace;
    }

    li {
      padding: 10px;
    }

    li:first-child {
      display: flex;
      border-bottom: 2px solid #999;
    }

    li:not(:first-child):hover {
      background-color: #ddd;
    }

    span {
      cursor: default;
    }

    span:last-child {
      float: right;
    }

    input {
      text-align: right;
      border: none;
      font-size: 16px;
      width: 100px;
      margin-left: auto;
      font-weight: bold;
      font-family: 'Courier New', Courier, monospace;
      outline: none;
      border-bottom: 1px solid #000;
    }
  </style>
</head>

<body>
  <div id="app">
    <p class="title">汇率计算器</p>
    <ul>
      <li><span>{{choice.name}}</span><input v-model="choice.xp"></li>
      <li v-for="Url in Urls" @click="isSelect(Url.name)">
        <span>{{Url.name}}</span>
        <span>{{Url.xp}}</span>
      </li>
    </ul>
    <p class="intro">鼠标点击可以切换货币种类</p>
  </div>



  <script>
    let rate = {
      CNY: { CNY: 1, JPY: 16.876, HKD: 1.1870, USD: 0.1526, EUR: 0.1294 },
      JPY: { CNY: 0.0595, JPY: 1, HKD: 0.0702, USD: 0.0090, EUR: 0.0077 },
      HKD: { CNY: 0.8463, JPY: 14.226, HKD: 1, USD: 0.1286, EUR: 0.10952 },
      USD: { CNY: 6.5813, JPY: 110.62, HKD: 7.7759, USD: 1, EUR: 0.85164 },
      EUR: { CNY: 7.7278, JPY: 129.89, HKD: 9.1304, USD: 1.1742, EUR: 1 },
    }
    new Vue({
      el: '#app',
      data: {
        choice: { name: "CNY", xp: 100 },
        Urls: [
          { name: "JPY", xp: 1687.60 },
          { name: "HKD", xp: 118.70 },
          { name: "USD", xp: 15.26 },
          { name: "EUR", xp: 12.94 },
        ],
      },

      watch: {
        choice: {
          handler: function (newVal, oldVal) {
            for (var i = 0; i < this.Urls.length; i++) {
              this.Urls[i].xp = (newVal.xp * rate[this.choice.name][this.Urls[i].name]).toFixed(2)
              this.Urls[i].xp = (this.choice.xp * rate[newVal.name][this.Urls[i].name]).toFixed(2)
            }
          },
          deep: true
        }
      },
      methods: {
        isSelect(item) {
          var urlName = this.choice.name;
          this.choice.name = item;
          for (var i = 0; i < this.Urls.length; i++) {
            if (this.Urls[i].name === item) {
              this.Urls[i].name = urlName;
            }
          }
        }
      }
    })
  </script>
</body>

</html>